<!-- 事件绑定指令 -->
<template>
    <!--举例： 通过绑定 点击事件 实现数字加减 和 信息展示 -->
    <!--01 <button v-on:事件名="内联语句">按钮</button> -->
<div>
    <p>count: {{ count }}</p>
    <button v-on:click="count++"> +1（对count） </button>
    <p></p>
</div>


    <!--02 <button v-on:事件名="处理函数">按钮</button> -->
<div>
    <!-- 调用无参函数 -->
    <!-- 当在指令中使用函数时，例如v-on:click="handler"，如果不需要传递参数，可以省略括号，比如写成@click="handler"。 -->
    <button v-on:click="showInfo"> 点击我就在控制台输出信息 </button>
    <p></p>
</div>


    <!--03 <button v-on:事件名="处理函数(实参列表)">按钮</button> -->
<div>

    <button v-on:click="add(3)"> +3（对count） </button>
    <p></p>
    <!-- 简写：“ v-on:事件 ” 成 “ @事件 ” -->
    <button @click="add(3)"> +3（对count） </button>
</div>

</template>

<script setup>
import { ref } from 'vue';

    const count = ref(1)
    const showInfo = () =>{
        console.log('欢迎来到vue')
    }
    const add = (n) => count.value += n
</script>

<style>
    button{
        border: 2px solid red;
    }
</style>